<!--
 * @FileDescription 协议定义
 * @Author 杨宇翔
 * @Date 20220628 10:31:18
 * @LastEditors 杨宇翔
 * @LastEditTime 20220628 10:31:18
-->
<template>
    <div class="parser">
        <div class="header">
            <span>数据协议解析训练</span>
            <button class="reset" type="button" @click="ProtocolComponent.Default.ShowTool.value = true">
                <span>进制转换器</span>
            </button>
            <button class="reset" type="button"
                @click="ProtocolComponent.Default.ShowParserReferences.value = !ProtocolComponent.Default.ShowParserReferences.value">
                <span>显示参考值</span>
            </button>
            <button class="reset" type="button" @click="ProtocolComponent.Default.ShowParserResults.value = true">
                <span>提交</span>
            </button>
        </div>
        <div class="content">
            <table>
                <thead>
                    <th>序号</th>
                    <th>数据名称</th>
                    <th>解析值</th>
                    <th>参考值</th>
                    <th>结果</th>
                </thead>
                <tbody v-show="ProtocolComponent.Default.Data.value.length > 0">
                    <tr v-for="[name, definition] of ProtocolComponent.Default.Definitions" :key="name">
                        <td>{{ definition.Id }}</td>
                        <td>{{ definition.Name }}</td>
                        <!-- 解析值 -->
                        <td>
                            <input class="reset" type="text" v-model="definition.Value">
                        </td>
                        <td>
                            <span v-show="ProtocolComponent.Default.ShowParserReferences.value">
                                {{ definition.Reference }}
                            </span>
                        </td>
                        <td>
                            <img v-if="ProtocolComponent.Default.ShowParserResults.value" :src="definition.Value == definition.Reference
                            ? '/static/InertialNavigation/ic_right.png'
                            : '/static/InertialNavigation/ic_error.png'">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ProtocolComponent } from './InertialNavigationComponent';
</script>

<style scoped>
::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}

::-webkit-scrollbar-thumb {
    background: rgba(129, 133, 156, 0.5);
    border-radius: 0.5rem;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(129, 133, 156, 1);
}

::-webkit-scrollbar-track {
    border-radius: 0.5rem;
    background-color: rgba(129, 133, 156, 0.1);
}

.parser {
    padding-top: 4rem;

    display: flex;
    flex-direction: column;
    gap: 2rem;

    overflow: hidden;
}

.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;

    padding: 0 4rem;
}

.header>span {
    color: #B1B1D4;
    font-size: 3.6rem;
    font-weight: 600;
}

.header>button {
    width: 15rem;
    height: 4rem;

    border-radius: 0.6rem;
    background-color: #36384B;
}

.header>button:last-of-type {
    width: 12rem;
    height: 5rem;

    margin-left: auto;
}

.header>button>span {
    color: white;
    font-size: 1.8rem;
}

.header>button:hover {
    background-color: #A2A2FF80;
}

.header>button:last-of-type:hover {
    background: linear-gradient(180deg, #807DE1 0%, #218CDE 100%);
}

.content {
    max-height: 100%;
    margin-bottom: 3rem;
    overflow: overlay;
}

table {
    width: 100%;
}

thead {
    height: 4rem;

    position: sticky;
    top: 0;

    background-color: #131620;
}

thead::after {
    content: '';

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 0.1rem;

    background-color: #81859C1A;
}

th {
    height: 3.6rem;

    color: #81859C;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.4rem;
}

th:nth-of-type(1) {
    width: 10%;
}

th:nth-of-type(2) {
    width: 40%;
}

th:nth-of-type(3) {
    width: 20%;
}

th:nth-of-type(4) {
    width: 20%;
}

th:nth-of-type(5) {
    width: 10%;
}

tr {
    line-height: 2rem;
}

td {
    padding: 1rem 0;

    color: #B1B1D4;
    font-size: 1.6rem;
    text-align: center;
    line-height: 2rem;
}

td>input {
    width: 100%;
    height: 3.6rem;

    color: white;

    border: solid 0.1rem #36384B;

    font-size: 1.8rem;
    text-align: center;
}

td>input:focus {
    border: solid 0.1rem;
    border-image: linear-gradient(90deg, rgba(128, 125, 225, 1), rgba(33, 140, 222, 1)) 1 1;
}
</style>